<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>DOH MVC Mobile Demo Test</title>
		<link rel="stylesheet" type="text/css" href="../../1.7/mobile/demo/demo.css"/>
		<style>
			html, body{
				height: 100%;
				overflow: hidden;
				position: relative;
			}
			.mblEdgeToEdgeList {
				background-color: #DBDDE2;
			}
		</style>
		<script type="text/javascript" data-dojo-config="parseOnLoad:0,isDebug:1,async:1, mvc: {debugBindings: 1}" src="../../../../../dojo/dojo.js"></script>
		<script type="text/javascript">
			var ctrl, listCtrl;
			var updateView, updateModel;

			require([
				"doh/runner",
				"dojo/_base/declare",
				"dojo/_base/json",
				"dojo/when",
				"dojo/dom",
				"dojo/store/JsonRest",
				"dojo/store/Memory",
				"dojox/mvc/at",
				"dijit/registry",
				"dojox/mobile/parser",
				"dojox/mvc/getPlainValue",
				"dojox/mvc/getStateful",
				"dojox/mvc/EditModelRefController",
				"dojox/mvc/ListController",
				"dojox/mvc/StoreRefController",
				"dojox/mobile",
				"dojox/mobile/compat",
				"dojox/mobile/ScrollableView",
				"dojox/mobile/Button",
				"dojox/mobile/TextArea",
				"dojox/mobile/TextBox",
				"dojox/mobile/ViewController",
				"dojox/mobile/FixedSplitter",
				"dojox/mobile/EdgeToEdgeList",
				"dojox/mobile/EdgeToEdgeCategory",
				"dojox/mobile/deviceTheme",
				"dojox/mobile/RoundRectCategory",
				"dojox/mobile/Heading",
				"dojox/mvc/Group",
				"dojox/mvc/Generate",
				"dojox/mvc/WidgetList",
				"dojox/mvc/_InlineTemplateMixin",
				"dojo/domReady!"
			], function(doh, declare, djson, when, ddom, JsonRest, Memory, at, registry, parser, getPlainValue, getStateful, EditModelRefController, ListController, StoreRefController){
				window.at = at;

				ctrlClass = declare([EditModelRefController, ListController], {});
				ctrl = new ctrlClass({sourceModel: getStateful({
					Serial: "360324",
					First: "John",
					Last: "Doe",
					Email: "jdoe@us.ibm.com",
					ShipTo: {
						Street: "123 Valley Rd",
						City: "Katonah",
						State: "NY",
						Zip: "10536"
					},
					BillTo: {
						Street: "17 Skyline Dr",
						City: "Hawthorne",
						State: "NY",
						Zip: "10532"
					}
				})});
				ctrl.set("cursorIndex", "ShipTo");

				// used in the Generate View demo
				var genmodel;
				updateView = function() {
					try {
						genmodel = getStateful(djson.fromJson(ddom.byId("modelArea").value));
						registry.byId("view").set("children", genmodel);
						ddom.byId("outerModelArea").style.display = "none";
						ddom.byId("viewArea").style.display = "";
					}catch(err){
						console.error("Error parsing json from model: "+err);
					}
				};

				// used in the Generate View demo
				updateModel = function() {
					ddom.byId("outerModelArea").style.display = "";
					try {
						ddom.byId("modelArea").focus(); // hack: do this to force focus off of the textbox, bug on mobile?
						ddom.byId("viewArea").style.display = "none";
						registry.byId("modelArea").set("value", djson.toJson(getPlainValue(genmodel), true));
					} catch(e) {
						console.log(e);
					};
				};

				var listCtrlClass = declare([StoreRefController, EditModelRefController, ListController], {
					addEmpty: function(){
						var modelToInsert = getStateful({
							First: "",
							Last: "",
							Location: "CA",
							Office: "",
							Email: "",
							Tel: "",
							Fax: ""
						});
						this.model.push(modelToInsert);
						this.set("cursor", modelToInsert);
					}
				});

				listCtrl = new listCtrlClass({cursorIndex: 0});

				parser.parse();
				ddom.byId("wholepage").style.display = "";

				when((new JsonRest({target: require.toUrl("dojox/mvc/tests/_data/mvcRepeatData.json")})).query({}), function(results){
					listCtrl.set("store", new Memory({data: results.items}));
					when(listCtrl.queryStore({Location: "CA"}), function(results){
						doh.register("Ship to - Bill to Address page", [{
							name: "Initial",
							runTest: function(){
								registry.byId("settings").show();
								doh.is("360324", registry.byId("serialInput").get("value"), "Order# should be set");
								doh.is("123 Valley Rd", registry.byId("streetInput").get("value"), "Street should be set of Ship To");
							}
						}, {
							name: "TestBillTo",
							runTest : function(){
								ctrl.set("cursorIndex", "BillTo");
								doh.is("17 Skyline Dr", registry.byId("streetInput").get("value"), "Street should be set of Bill To");
							}
						}, {
							name: "TestReset",
							runTest: function(){
								var addr1 = registry.byId("streetInput");
								addr1.set("value", "Foo");
								doh.is("Foo", ctrl.get("Street"), "Street should be Foo");
								ctrl.reset();
								doh.is("17 Skyline Dr", addr1.get("value"), "Street should be set back to of Bill To");
							}
						}]);

						doh.register("Repeat Data Binding Example page", [{
							name: "Initial",
							runTest: function(){
								registry.byId("repeat").show();
								doh.is("Chad", registry.byId("nameInput0").get("value"), "nameInput0 should be Chad");
								doh.is("Hunter", registry.byId("nameInput1").get("value"), "nameInput1 should be Hunter");
								doh.is("John", registry.byId("nameInput2").get("value"), "nameInput2 should be John");
							}
						}, {
							name: "ChangeCursor",
							runTest: function(){
								listCtrl.set("cursorIndex", 1);
								doh.is("Hunter", registry.byId("firstnameInputDetail").get("value"), "firstnameInputDetail should be Hunter");
							}
						}, {
							name : "ResetAll",
							runTest : function(){
								var first = registry.byId("firstnameInputDetail");
								first.set("value", "Foo");
								doh.is("Foo", listCtrl.get("First"), "First should be Foo");
								listCtrl.reset();
								doh.is("Hunter", registry.byId("firstnameInputDetail").get("value"), "firstnameInputDetail should be Hunter");
							}
						}]);

						doh.register("Simple Form Generate Example page", [{
							name: "Initial",
							runTest: function(){
								registry.byId("generate").show();
								updateView();
								var tb0 = registry.byId("TB0");
								doh.is("11111", tb0 && tb0.get("value"), "Serial should be 11111");
								var tb6 = registry.byId("TB6");
								doh.is("111-111-1111", tb6 && tb6.get("value"), "Office should be 111-111-1111");
								tb6.set("value", "333-333-3333");
								updateModel();
								doh.t(ddom.byId("modelArea").value.indexOf("\"Office\": \"333-333-3333\""), "Model should be updated with newer Office phone number");
							}
						}]);

						doh.run();
					});
				});
			}); // end function
		</script>
	</head>
	<body>
		<div id="wholepage" style="display:none">
			<div id="foo" data-dojo-type="dojox.mobile.View" selected="true">
				<h1 data-dojo-type="dojox.mobile.Heading">Mobile MVC Demo</h1>
				<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Mobile MVC Views</h2>
				<ul data-dojo-type="dojox.mobile.RoundRectList">
					<li id="sdb" data-dojo-type="dojox.mobile.ListItem" icon="../../1.7/mobile/demo/images/i-icon-1.png" transition="slide" moveTo="settings">
						Simple Data Binding
					</li>
					<li id="rdb" data-dojo-type="dojox.mobile.ListItem" icon="../../1.7/mobile/demo/images/i-icon-2.png" transition="slide" moveTo="repeat">
						Repeat Data Binding
					</li>
					<li id="sfg" data-dojo-type="dojox.mobile.ListItem" icon="../../1.7/mobile/demo/images/i-icon-3.png" transition="slide" moveTo="generate">
						Simple Form Generate
					</li>
				</ul>
			</div>
			<div id="settings" data-dojo-type="dojox.mobile.ScrollableView">
				<h1 id="home" data-dojo-type="dojox.mobile.Heading" back="Home" moveTo="foo">Data Binding Example</h1>
				<form name="testForm" id="testForm">
				<div class="field-title">Ship to - Bill to Address</div>
					<div class="fieldset" data-dojo-type="dojox.mvc.Group" data-dojo-props="target: at(ctrl, 'model')">
						<div class="field-row">
							<span>Order #</span>
							<input id="serialInput" placeholder="Order #" data-dojo-type="dojox.mobile.TextBox" data-dojo-props="value: at('rel:', 'Serial')" />
						</div>
						<div class="field-row">
							<span>Last</span>
							<input placeholder="Last" data-dojo-type="dojox.mobile.TextBox" data-dojo-props="value: at('rel:', 'Last')" />
						</div>
						<div class="field-row">
							<span>Email</span>
							<input placeholder="Last" data-dojo-type="dojox.mobile.TextBox" data-dojo-props="value: at('rel:', 'Email')" />
						</div>
					</div>
					<div class="spacer"></div>
					<button id="shipto" type="button" data-dojo-type="dojox.mobile.Button" class="mblBlueButton" onclick="ctrl.set('cursorIndex', 'ShipTo');">Ship To</button>
					<button id="billto" type="button" data-dojo-type="dojox.mobile.Button" class="mblBlueButton" onclick="ctrl.set('cursorIndex', 'BillTo');">Bill To</button>
					<br/>
					<div class="fieldset" id="addrGroup" data-dojo-type="dojox.mvc.Group" data-dojo-props="target: at(ctrl, 'cursor')">
						<div class="field-row">
							<span>Street</span>
							<input id="streetInput" placeholder="Street" data-dojo-type="dojox.mobile.TextBox" data-dojo-props="value: at('rel:', 'Street')" />
						</div>
						<div class="field-row">
							<span>City</span>
							<input placeholder="City" data-dojo-type="dojox.mobile.TextBox" data-dojo-props="value: at('rel:', 'City')" />
						</div>
						<div class="field-row">
							<span>State</span>
							<input placeholder="State" data-dojo-type="dojox.mobile.TextBox" data-dojo-props="value: at('rel:', 'State')" />
						</div>
						<div class="field-row">
							<span>ZIP Code</span>
							<input placeholder="ZIP Code" data-dojo-type="dojox.mobile.TextBox" data-dojo-props="value: at('rel:', 'Zip')" />
						</div>
					</div>
					<div class="spacer"></div>
					<button id="reset1" type="button" data-dojo-type="dojox.mobile.Button" class="mblBlueButton" onclick="ctrl.reset()">Reset</button>
				</form>
			</div>
			<div id="repeat" data-dojo-type="dojox.mobile.ScrollableView">
				<h1 data-dojo-type="dojox.mobile.Heading" back="Home" moveTo="foo">Repeat Data Binding Example</h1>
				<form name="repeatTestForm" id="repeatTestForm">
					<div class="field-title">Search Results</div>
					<div class="fieldset" class="row"
						data-dojo-type="dojox/mvc/WidgetList"
						data-dojo-mixins="dojox/mvc/_InlineTemplateMixin"
						data-dojo-props="children: at(listCtrl, 'model')">
						<script type="dojox/mvc/InlineTemplate">
							<div class="row">
								<input id="nameInput${indexAtStartup}" placeHolder="First Name" data-dojo-type="dojox.mobile.TextBox" data-dojo-props="value: at('rel:', 'First')" />
								<button id="details${indexAtStartup}" type="button" data-dojo-type="dojox.mobile.Button" class="mblBlueButton" onclick="listCtrl.set('cursorIndex', '${indexAtStartup}')">Details</button>
							</div>
						</script>
					</div>
					<div class="spacer"></div>
					<div id="detailsBanner">Details for selected index:</div>
					<div class="fieldset" id="detailsGroup" data-dojo-type="dojox.mvc.Group" data-dojo-props="target: at(listCtrl, 'cursor')">
						<div class="field-row">
							<span>First Name</span>
							<input id="firstnameInputDetail" placeholder="First Name" data-dojo-type="dojox.mobile.TextBox" data-dojo-props="value: at('rel:', 'First')" />
						</div>
						<div class="field-row">
							<span>Last Name</span>
							<input placeholder="Last Name" data-dojo-type="dojox.mobile.TextBox" data-dojo-props="value: at('rel:', 'Last') "/>
						</div>
						<div class="field-row">
							<span>Email</span>
							<input placeholder="Email" data-dojo-type="dojox.mobile.TextBox" data-dojo-props="value: at('rel:', 'Email')" />
						</div>
						<div class="field-row">
							<span>Telephone</span>
							<input placeholder="Telephone" data-dojo-type="dojox.mobile.TextBox" data-dojo-props="value: at('rel:', 'Tel')" />
						</div>
					</div>
					<div class="spacer"></div>
					<button id="add" type="button" data-dojo-type="dojox.mobile.Button" class="mblBlueButton" onclick="listCtrl.addEmpty();">Add</button>
					<button id="save" type="button" data-dojo-type="dojox.mobile.Button" class="mblBlueButton" onclick="listCtrl.commit();">Save</button>
					<button id="reset2" type="button" data-dojo-type="dojox.mobile.Button" class="mblBlueButton" onclick="listCtrl.reset();">Reset</button>
				</form>
			</div>
			<div id="generate" data-dojo-type="dojox.mobile.ScrollableView">
				<h1 data-dojo-type="dojox.mobile.Heading" back="Home" moveTo="foo">Simple Form Generate Example</h1>
				<div class="field-title"></div>
					<div id="main">
						<div id="leftNav"></div>
						<div id="mainContent" class="generate-maincontent">
							<div id="outerModelArea">
								<h3 data-dojo-type="dojox.mobile.RoundRectCategory">Model</h3>
								<div class="generate-textarea-row">
									<textarea class="generate-textarea-cell" data-dojo-type="dojox.mobile.TextArea" id="modelArea">
{
	"Serial": "11111",
	"First": "John",
	"Last": "Doe",
	"Email": "jdoe@example.com",
	"Phones": [
		{
			"Office": "111-111-1111"
		},
		{
			"Mobile": "222-222-2222"
		}
	]
}
									</textarea>
								</div>
								<div class="fieldset">
									<div class="spacer"></div>
									<button id="generate1" type="button" data-dojo-type="dojox.mobile.Button" class="mblBlueButton" onclick="updateView()">Generate Form</button>
								</div>
							</div>
							<div id="viewArea" style="display:none">
								<h3 data-dojo-type="dojox.mobile.RoundRectCategory">Generated View</h3>
									<div class="fieldset">
									<div id="view" data-dojo-type="dojox.mvc.Generate" data-dojo-props="widgetMapping: {'String': 'dojox.mobile.TextBox'}, idNameMapping: {'String' : 'TB'}"></div>
								</div>
								<div class="fieldset">
									<div class="spacer"></div>
									<button id="updateModel" type="button" data-dojo-type="dojox.mobile.Button" class="mblBlueButton" onclick="updateModel()">Update Model</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
